import ProForm, {
  ModalForm,
  ProFormGroup,
  ProFormInstance,
  ProFormSwitch,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Col, Row } from 'antd';
import React, { useRef } from 'react';

type FormProps = {
  visible: boolean;
  onCancel: () => void;
  current: API.VpnServer | undefined;
  onSubmit: (ips: string, outIps: string, status: boolean, change: boolean) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, onCancel, onSubmit } = props;
  if (!visible) {
    return <></>;
  }

  // const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const handleFormSubmit = async () => {
    let ips = formRef.current?.getFieldValue('ips');
    let status = formRef.current?.getFieldValue('status');
    let change = formRef.current?.getFieldValue('change');
    let outIps = formRef.current?.getFieldValue('outIps');
    onSubmit(ips, outIps, status, change);
  };

  return (
    <ModalForm
      width={900}
      open={visible}
      title="批量出口绑定IP"
      onFinish={handleFormSubmit}
      modalProps={{
        onCancel: onCancel,
        //destroyOnClose: false,
        maskClosable: false,
      }}
        formRef={formRef}
    >
      {/* <ProForm
        layout="horizontal"
        style={{
          margin: 'auto',
          marginTop: 0,
          marginLeft: 25,
          width: 1400,
          height: 700,
        }}
        submitter={{
          render: (props, doms) => {
            return [];
          },
        }}
        onFinish={handleFormSubmit}
      > */}
        <ProFormGroup>
          <ProFormSwitch name="status" initialValue={false} label="状态" />
          <ProFormSwitch name="change" initialValue={false} label="切换" />
        </ProFormGroup>

        <ProFormGroup>
          <Row gutter={24}>
            <Col span={12}>
              <ProFormTextArea
                width={400}
                name="ips"
                label={<span>绑定IP列表　[ 一行一个IP ]</span>}
                fieldProps={{ rows: 25 }}
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea
                width={400}
                name="outIps"
                label={<span>出口绑定IP列表　[ 一行一个IP ]</span>}
                fieldProps={{ rows: 25 }}
              />
            </Col>
          </Row>
        </ProFormGroup>
      {/* </ProForm> */}
    </ModalForm>
  );
};

export default Form;
